<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <!--如下代码，p 标签的行高将会是多少？-->
  <style>
    body {
      font-size: 20px;
      line-height: 200%;
    }
    p {
      font-size: 16px;
    }
  </style>

  <body>
    <p>AAA</p>

    <h2>line-height 不同类型的值，继承规则是不一样的</h2>
    <p>
      1.写具体的数值，如 30px，则继承该数值 <br>
      2.写百分比，如 200% ，则继承当前计算出来的值<br>
      3.写比例，如 2 或 1.5 ，则继承比例
    </p>

    <p>
      •   body  的  line-height  为  200%  ，这意味着  body  的行高是其  font-size  的200%。
      • 计算公式：  20px * 200% = 40px  。
      • 因此，  body  的行高为  40px  。
      •   p  标签的  font-size  为  16px  。
      •   p  标签没有显式设置  line-height  ，因此它会继承  body  的  line-height  值。
      由于  body  的  line-height  是用百分比（  200%  ）设置的，
       p  标签会继承计算后的值，而不是百分比本身
       因此，  p  标签的行高也会是  40px  ，
      而不是根据  p  标签的  font-size  重新计算。结论  AAA  的行高是  40px  。
    </p>
  </body>
</html>
